<template>
  <!-- hidden-sm-and-down -->
  <div class="container-fluid" id="header">
    <div class="container" v-show="isPc">
      <el-row :gutter="24">
        <el-col :span="6">
          <div @click="pushUrl('/home')" class="logo-bg"></div>
        </el-col>
        <el-col :span="18" class="h-right">
          <ul class="menu-wrap clearfix">
            <li
              class="menu-item"
              @click="toggleMenu(item)"
              :class="{ active: activePath == item.path }"
              v-for="(item, index) in titleList"
              :key="index"
            >{{ item.name }}</li>
          </ul>
          <div class="header-right">
            <a @click="pushUrl('/downloadApp')">下载app</a>
            <span class="margin-lr5">|</span>
            <span v-if="!userInfo.nickname ">
              <span class="isClcik" @click="loginShow('login')">登录</span> /
              <span class="isClcik" @click="registerShow('register')">注册</span>
            </span>
            <span v-if="userInfo.nickname ">{{ userInfo.nickname }}</span>
            <el-dropdown trigger="click" @command="command" v-if="userInfo.nickname ">
              <span class="el-dropdown-link">
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="/myChange">个人设置</el-dropdown-item>
                <el-dropdown-item command="/personalCenter">个人中心</el-dropdown-item>
                <el-dropdown-item command="/out">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
    </div>
    <user-view v-if="isUserView"></user-view>
  </div>
</template>
<script>
import { mapState } from "vuex";
import menuList from "@/router/menuList";
import userView from "@/views/user/index";
export default {
  components: {
    userView
  },
  data() {
    return {
      titleList: [],
      activePath: "",
      isPhoneAndQuestion: false,
      isPc: false
      // isUserView: false, // TODO:是否显示登录/注册
    };
  },
  computed: {
    ...mapState({
      userInfo: state => JSON.parse(state.userInfo) || { nickname: "" }
    }),
    isUserView() {
      return this.$store.getters.view.userView;
    }
  },

  created() {
    this.activePath = this.$route.path;
    this.isPc = this.$Common.navigator() == "pc";
    this.titleList = menuList;
    this.getIsPhoneAndQuestion(this.$route.path);
  },
  methods: {
    pushUrl(path) {
      this.$router.push(path);
    },
    loginShow(val) {
      this.$store.commit("SET_VIEW", { userView: true, showView: val });
    },
    registerShow(val) {
      this.$store.commit("SET_VIEW", { userView: true, showView: val });
    },
    command(path) {
      if (path == "/out") {
        this.$store.commit("clearUserInfo");
        this.$store.commit("clearToken");
        this.$Toast("已退出");
      } else {
        this.$router.push(path);
      }
    },
    toggleMenu(item) {
      this.$router.push(item.path);
    },
    testRoute(path) {
      return /^\/question/.test(path);
    },
    getIsPhoneAndQuestion(path) {
      if (!this.isPc && this.testRoute(path)) {
        this.isPhoneAndQuestion = true;
      } else {
        this.isPhoneAndQuestion = false;
      }
    }
  },
  watch: {
    $route(to, from) {
      this.activePath = to.path;
    }
  }
};
</script>
<style lang="less" scoped>
.h-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.isClcik {
  cursor: pointer;
}
.container-fluid {
  box-shadow: 0 0 15px #ddd;
  background-color: #fff;
}
.header-right {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.menu-wrap {
}
.collapse-btn {
  height: 80px;
  display: flex;
  align-items: center;
  img {
    height: 70px;
  }
}
.menu-item {
  position: relative;
  float: left;
  font-size: 16px;
  padding: 0px 18px;
  transition: 0.3s;
  height: 80px;
  display: flex;
  align-items: center;
  color: #333;
  box-sizing: border-box;
  justify-content: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  &::after {
    content: "";
    width: 80%;
    height: 3px;
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 10%;
    background: transparent;
  }
}
.menu-item.active {
  color: #27a4fe;
  &::after {
    background: #27a4fe;
  }
}
.margin-lr5 {
  margin: 0 3px;
}
.flex-center {
  font-size: 14px;
}

.logo-bg {
  margin-top: 14px;
  width: 195px;
  height: 52px;
  background: url(~assets/image/logo.png) center/cover no-repeat;
}
// 首页、下载app头部样式
.router-home,
.router-downloadApp {
  .logo-bg {
    background: url(~assets/image/logo-fff.png) center/cover no-repeat;
  }
  #header {
    box-shadow: none;
    background-color: transparent;
    color: #fff;
    .menu-item {
      color: #fff;
    }
    .el-dropdown {
      color: #fff;
    }
  }
}
.router-home #header {
  background-color: #0dacfc;
}

@media (min-width: 992px) {
}
</style>
